<template>
  <div class="body">
    <!-- 推送列表 -->
    <ul class="list">
      <li class="item">
        <img src="@/assets/indeximg/advertising.png" alt="" />
        <p>刷酸合集 | 不同肤质的刷酸攻略,手把手 教你正确刷酸!</p>
        <span>新手刷酸必看这篇~</span>
        <div class="comment">
          <div class="left">
            <img src="@/assets/indeximg/head.png" alt="" />
            <span>种草喵</span>
          </div>
          <div class="right">
            <img src="@/assets/indeximg/Tags.png" alt="" />
            <span>173</span>
            <img src="@/assets/indeximg/comment.png" alt="" />
            <span>5</span>
          </div>
        </div>
      </li>
      <li class="item">
        <img src="@/assets/indeximg/advertising.png" alt="" />
        <p>刷酸合集 | 不同肤质的刷酸攻略,手把手 教你正确刷酸!</p>
        <span>新手刷酸必看这篇~</span>
        <div class="comment">
          <div class="left">
            <img src="@/assets/indeximg/head.png" alt="" />
            <span>种草喵</span>
          </div>
          <div class="right">
            <img src="@/assets/indeximg/Tags.png" alt="" />
            <span>173</span>
            <img src="@/assets/indeximg/comment.png" alt="" />
            <span>5</span>
          </div>
        </div>
      </li>
      <!-- 轮播图 -->
      <div class="lunbo">
        <ul>
          <li><img src="@/assets/indeximg/lunbo1.png" alt="" /></li>
          <li><img src="@/assets/indeximg/lunbo1.png" alt="" /></li>
          <li><img src="@/assets/indeximg/lunbo1.png" alt="" /></li>
        </ul>
      </div>
      <li class="item">
        <img src="@/assets/indeximg/advertising.png" alt="" />
        <p>刷酸合集 | 不同肤质的刷酸攻略,手把手 教你正确刷酸!</p>
        <span>新手刷酸必看这篇~</span>
        <div class="comment">
          <div class="left">
            <img src="@/assets/indeximg/head.png" alt="" />
            <span>种草喵</span>
          </div>
          <div class="right">
            <img src="@/assets/indeximg/Tags.png" alt="" />
            <span>173</span>
            <img src="@/assets/indeximg/comment.png" alt="" />
            <span>5</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {},
};
</script>

<style lang="less" scoped>
@import "../../assets/css/var.less";
//推送列表
.body {
  text-align: start;
  .font_f_w ();
  .list {
    margin: 0 30px 0 31px;
    height: 2400px;
    .item {
      height: 680px;
      .border-bottom();
      img {
        width: 688px;
        height: 302px;
        margin: 83px 0 30px 0;
      }
      p {
        font-size: 38px;
        .font_f_w ();
        color: #1a1a1a;
      }
      span {
        display: block;
        margin: 36px 0;
        font-size: 24px;
        color: #515151;
      }
      .comment {
        .between ();
        height: 54px;
        line-height: 54px;
        .left {
          display: flex;
          img {
            width: 54px;
            height: 54px;
            margin: 0;
          }
          span {
            display: inline-block;
            width: 100px;
            height: 54px;
            margin: 0;
            margin-left: 23px;
            font-size: 24px;
            color: #414141;
          }
        }
        .right {
          display: flex;
          img {
            width: 33px;
            height: 33px;
            margin: 11px 12px 0 0;
          }
          span {
            width: 43px;
            height: 54px;
            font-size: 24px;
            margin: 0;
            margin-right: 40px;
            color: #b9b9b9;
          }
        }
      }
    }
  }
  //轮播
  .lunbo {
    ul {
      padding: 40px 0 30px 0;
      display: flex;
      .border-bottom();
      overflow: auto;
      li {
        margin-right: 16px;
        img {
          width: 501px;
          height: 168px;
        }
      }
    }
  }
}
</style>
